<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>详细统计</title>
  <link rel="stylesheet" href="css/bootstrap-table.min.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/dcalendar.picker.css">
  <link rel="stylesheet" href="css/paging.css">
  <link rel="stylesheet" href="css/paging.css">
  <link rel="stylesheet" href="css/cqs.style.css">
</head>
<body style="background-color: #f4f4f4;">
<div class="cqs-main">
  <div class="cqs-main_top cqs-mgt30">
    数据报表：<a class="cqs-clc40000" href="javascript:;">成本中心＞</a>

    <div class="date-box">
      <span class="date-group"><input id='mydatepicker' placeholder="2018年03月27日" type='text'/>
        <img src="img/btn_arrow_down_h.png" alt=""></span> —
      <span class="date-group"><input id='mydatepicker2' placeholder="2018年03月27日" type='text'/>
        <img src="img/btn_arrow_down_h.png" alt=""></span>
    </div>

    <div class="cqs-search-group"><span class="cqs-img-search"><img src="img/icon_search_grey.png" alt=""></span> <input type="text" placeholder="在当前条件下搜索商品名称"></div>

    <div class="checkbox-group" style="margin-left: 10px;"><input type="checkbox" id="admin"><label for="admin">admin</label></div>
    <div class="checkbox-group"><label for="account"><input type="checkbox" id="account">管理账户</label></div>
    <div class="checkbox-group"><label for="user"><input type="checkbox" id="user">用户账号</label></div>
    <button class="cqs-output">导出报表</button>
  </div>
  <div class="cqs-main_con table-responsive cqs-box cqs-mgb50 cqs-bgfff"><!--table table-bordered -->
    <table class="table table-bordered cqs-table">
      <tr>
        <th>序号</th>
        <th>账号</th>
        <th>所属成本中心</th>
        <th>2017/01</th>
        <th>2017/02</th>
        <th>2017/03</th>
        <th>2017/04</th>
        <th>2017/05</th>
        <th>2017/06</th>
        <th>合计(元)</th>
      </tr>
      <tr>
        <td>1</td>
        <td>XSzhanghao_001</td>
        <td>总部-销售部</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
      </tr>
      <tr>
        <td>1</td>
        <td>XSzhanghao_001</td>
        <td>总部-销售部</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
      </tr>
      <tr>
        <td>1</td>
        <td>XSzhanghao_001</td>
        <td>总部-销售部</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
        <td>1,000.00</td>
      </tr>
    </table>

    <div class="box" id="box"></div>
  </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/paging.min.js"></script>
<script src="js/dcalendar.picker.js"></script>

<script>
  var setTotalCount = 301;
  $('#box').paging({
    initPageNo: 3, // 初始页码
    totalPages: 30, //总页数
    totalCount: '', // 条目总数
    slideSpeed: 600, // 缓动速度。单位毫秒
    jump: true, //是否支持跳转
    callback: function (page) { // 回调函数
      console.log(page);
    }
  });

  var _date = new Date();

  $('#mydatepicker').dcalendarpicker({
    format: 'yyyy年MM月dd日',
    defaultDate: '1',
    changeYear: true

  });
  $('#mydatepicker2').dcalendarpicker({
    format: 'yyyy年MM月dd日',
    defaultDate: _date
  });
</script>
</body>
</html>